<template>
  <v-chart :options="options"></v-chart>
</template>

<script>
// 注意：一定要引入 echarts 的 bmap 扩展，否则将不能识别 bmap 属性
import "echarts/extension/bmap/bmap";
//准备数据源
const testPoint = [{
  name: '海门',
  value: [121.15, 31.89, 80]
}, {
  name: '南京',
  value: [118.78, 32.04, 100]
}]
export default {
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.options = {
      title: {
        text:  '小咚外卖销售数据大盘',
        subtext: '销售趋势统计',
        // 点击外链的网站
        sublink: 'https://www',
        left: 'center'
      },
      bmap: {
        key: "G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb",
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: false,
        // 自定义map样式
        mapStyle: {
          styleJson: [
            {
              featureType: "water",
              elementType: "all",
              stylers: {
                color: "#d1d1d1",
              },
            },
            {
              featureType: "land",
              elementType: "all",
              stylers: {
                color: "#f3f3f3",
              },
            },
            {
              featureType: "railway",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "highway",
              elementType: "all",
              stylers: {
                color: "#fdfdfd",
              },
            },
            {
              featureType: "highway",
              elementType: "labels",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "arterial",
              elementType: "geometry",
              stylers: {
                color: "#fefefe",
              },
            },
            {
              featureType: "arterial",
              elementType: "geometry.fill",
              stylers: {
                color: "#fefefe",
              },
            },
            {
              featureType: "poi",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "green",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "subway",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "manmade",
              elementType: "all",
              stylers: {
                color: "#d1d1d1",
              },
            },
            {
              featureType: "local",
              elementType: "all",
              stylers: {
                color: "#d1d1d1",
              },
            },
            {
              featureType: "arterial",
              elementType: "labels",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "boundary",
              elementType: "all",
              stylers: {
                color: "#fefefe",
              },
            },
            {
              featureType: "building",
              elementType: "all",
              stylers: {
                color: "#d1d1d1",
              },
            },
            {
              featureType: "label",
              elementType: "labels.text.fill",
              stylers: {
                color: "#999999",
              },
            },
          ],
        },
      },
      // 绘制散点
      series: [{
        name: '销售额',
        type: 'scatter', // 类型-散点
        coordinateSystem: 'bmap', // 
        data: testPoint,
        symbolSize: function(val) {
          return val[2] / 10
        },
        itemStyle: {
          color: 'purple',
          shadowBlur: 10,
          shadowColor: '#333'
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: true
        },
        // 鼠标悬浮显示
        emphasis: {
          label: {
            show: true
          }
        }
      }, {
        // 绘制前三--波纹效果
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: testPoint,
        symbolSize: function(val) {
          return val[2] / 10
        },
        encode: {
          value: 2
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: true
        },
        itemStyle: { // 颜色
          color: 'purple',
          shadowBlur: 10,
          shadowColor: '#333'
        },
        hoverAnimation: true, // 鼠标移动上去的放大动画
        rippleEffect: { // 修改波纹样式
          brushType: 'stroke'
        },
      }]
    };
  },
};
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>